<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>修改愿望</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        input {
            outline: none;
        }

        .xyq {
            width: 500px;
            margin: 40px auto 0px auto;
            color: #33af44;
        }

        .box {
            width: 500px;
            margin: 0 auto;
            padding: 20px;
        }

        .box:after {
            content: '';
            height: 0;
            line-height: 0;
            display: block;
            visibility: hidden;
            clear: both;
        }

        .name, .color {
            float: left;
            display: inline-block;
            width: 50%;
            height: 60px;
            line-height: 30px;
        }

        .colorList li {
            float: left;
            width: 30px;
            height: 30px;
            margin-right: 5px;
            cursor: pointer;
        }

        #color_77ee77 {
            background: #77ee77;
        }

        #color_77ccff {
            background: #77ccff;
        }

        #color_ffffaa {
            background: #ffffaa;
        }

        #color_3a87ad {
            background: #3a87ad;
        }

        #name {
            width: 220px;
            height: 30px;
            line-height: 30px;
            padding: 0 5px;
        }

        .yw {
            line-height: 30px;
        }

        #wdyw {
            resize: none;
        }

        textarea {
            line-height: 30px;
            padding: 0 5px;
            outline: none;
        }

        #pwd {
            width: 150px;
            height: 30px;
            line-height: 30px;
            margin-right: 30px;
            padding: 0 5px;
        }

        .btn {
            display: inline-block;
            background: #6ccc6b;
            color: #FFFFFF;
            height: 30px;
            line-height: 30px;
            width: 60px;
            border: 1px solid #6ccc6b;
            border-radius: 5px;
            cursor: pointer;
            text-decoration: none;
        }

        .colorList li{
            width: 0;
            color: transparent;
            overflow: hidden;
            padding-left: 30px;
            border: 1px solid transparent;
        }

        #color {
            display: none;
        }

    </style>
</head>
<body>
<?php

// 创建连接
$conn = new mysqli("localhost", "root", "root", "xyq");
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}
$id = $_GET['id'];
setcookie("id", $id);
// 跳转到index.php
// header('Location: index.php');
$sql = "SELECT name FROM `xyq` WHERE id='$id' ";
$nam = $conn->query($sql);
$name = $nam->fetch_assoc();

$sql = "SELECT color FROM `xyq` WHERE id='$id' ";
$colo = $conn->query($sql);
$color = $colo->fetch_assoc();

$sql = "SELECT text FROM `xyq` WHERE id='$id' ";
$tet = $conn->query($sql);
$tat = $tet->fetch_assoc();

$sql = "SELECT password FROM `xyq` WHERE id='$id' ";
$pass = $conn->query($sql);
$password = $pass->fetch_assoc();
?>
<form id="form" action="editon.php" method="get">
    <h2 class="xyq">许愿墙</h2>
    <div class="box">
        <div class="name">
            我的名字：<br>
            <input type="text" id="name" placeholder="匿名" name="name" required="required" value="<? echo $name["name"] ?>">
        </div>
        <div class="color">
            贴纸颜色：<br>
            <ul class="colorList">
                <li class="cor" id="color_77ee77" onclick="document.querySelector('#color').value=this.innerHTML;">#77ee77</li>
                <li class="cor" id="color_77ccff" onclick="document.querySelector('#color').value=this.innerHTML;">#77ccff</li>
                <li class="cor" id="color_ffffaa" onclick="document.querySelector('#color').value=this.innerHTML;">#ffffaa</li>
                <li class="cor" id="color_3a87ad" onclick="document.querySelector('#color').value=this.innerHTML;">#3a87ad</li>
            </ul>
        </div>
        <div class="yw">
            我的愿望：<br>
            <textarea name="text" id="wdyw" cols="65" rows="5" placeholder="80个字符以内（中文占2个字符位）" required="required"
                      maxlength="40"><? echo $tat["text"] ?></textarea>
        </div>
        <div class="foot">
            保护密码：
            <input type="text" id="pwd" name="pwd" placeholder="6个字符以内" required="required">
            <input type="submit" value="提交" class="btn" onclick="verify()">
            <button class="btn" onclick="location.href='index.php'">取消</button>
<script>

</script>
</body>
</html>